<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '独立艺术家',
  },
}
</route>

<template>
  <div class="artist-page" v-if="artist.id">
    <!-- 艺术家信息 -->
    <div class="artist">
      <div class="user-info">
        <image class="img" :src="artist.avatar" mode="aspectFill" />
        <div class="info">
          <div class="box">
            <div class="name">{{ artist.name }}</div>
            <div class="pinyin">{{ artist.artName }}</div>
            <div class="care">{{ artist.fansNum }}人关注</div>
          </div>
          <!-- 自己的时候不显示这个 -->
          <div v-if="userInfo.userId !== artist.userId">
            <div class="button active" v-if="artist.isFollow" @click="cancelFollow()">已关注</div>
            <div class="button active" v-else @click="follow(artist.id)">
              <wd-icon name="add1" size="30rpx" color="#fff"></wd-icon>
              关注
            </div>
          </div>
        </div>
      </div>

      <div class="introduction">
        <div class="title">简介</div>
        <div class="text">{{ artist.resume }}</div>
      </div>

      <wd-sticky>
        <div class="menu">
          <div
            class="item"
            :class="{ active: active === index }"
            v-for="(item, index) in list"
            :key="index"
            @click="scrollTo(index)"
          >
            {{ item }}
          </div>
        </div>
      </wd-sticky>
    </div>

    <div class="content">
      <!-- 活动 -->
      <Active :artist="artist" />

      <!-- 动态 -->
      <Trends :artist="artist" />

      <!-- 民宿 -->
      <Hotel :artist="artist" />
    </div>

    <AddContentButton v-if="userInfo.userId === artist.userId" />
  </div>
  <Seat v-else :loading="loading" />
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/user'
import { msgSuccess, showModal } from '@/utils/index'
import Active from './components/Active.vue'
import Trends from './components/Trends.vue'
import Hotel from './components/Hotel.vue'
import AddContentButton from './components/AddContentButton.vue'

const list = ref(['活动', '动态', '民宿'])
const active = ref(0)
const loading = ref(false)
const artist = ref({})

let id = null
onLoad((query) => {
  if (query.id) {
    id = query.id
    getData()
  }
})
onShow(() => {
  if (id) {
    getData()
  }
})

const { userInfo } = useUserStore()

function getData() {
  loading.value = true
  artist.value = {}
  http
    .get('/artist-authorized-app/open/detail', {
      id,
    })
    .then((res: any) => {
      artist.value = res
    })
    .finally(() => {
      loading.value = false
    })
}

// 关注
function follow() {
  uni.showLoading()
  http
    .post('/follow-fans-app/follow', {
      starUserId: artist.value.id,
    })
    .then((res: any) => {
      msgSuccess('操作成功')
      getData()
    })
    .finally(() => {
      uni.hideLoading()
    })
}

// 取消关注
function cancelFollow() {
  showModal({
    title: '提示',
    content: '确定取消关注吗？',
  }).then(() => {
    uni.showLoading()
    http
      .post('/follow-fans-app/cancel', {
        starUserId: artist.value.id,
      })
      .then((res: any) => {
        msgSuccess('操作成功')
        getData()
      })
      .finally(() => {
        uni.hideLoading()
      })
  })
}

const scrollTop = ref(0)
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})
// 跳转到某个组件
function scrollTo(index) {
  active.value = index
  uni
    .createSelectorQuery()
    .select(['#active', '#trends', '#hotel'][index])
    .boundingClientRect((res: any) => {
      if (res) {
        uni.pageScrollTo({
          scrollTop: res.top + scrollTop.value - 30,
        })
      }
    })
    .exec()
}
</script>

<style lang="scss" scoped>
.artist-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: 10px;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 10px) !important;
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
  background-color: #f1f1f1;
  .artist {
    padding: 30rpx 0rpx 20rpx;
    background-color: #fff;
    border-radius: 0px 0px 38rpx 38rpx;
    .user-info {
      display: flex;
      padding: 0 30rpx;
      .img {
        width: 154rpx;
        height: 215rpx;
        background-color: var(--bgc4);
        border-radius: 15rpx;
      }
      .info {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 27rpx;
        color: var(--color1);
        .name {
          font-size: 46rpx;
          font-weight: 600;
          line-height: 38rpx;
        }
        .pinyin {
          margin-top: 20rpx;
          font-size: 27rpx;
          line-height: 38rpx;
        }
        .care {
          margin-top: 4rpx;
          font-size: 23rpx;
          line-height: 38rpx;
          color: var(--color4);
        }
      }
      .button {
        display: inline-flex;
        align-items: center;
        height: 58rpx;
        padding: 0 28rpx;
        font-size: 23rpx;
        color: #fff;
        background-color: var(--color1);
        border-radius: 28rpx;
      }
    }
    .introduction {
      padding: 0 30rpx;
      margin: 40rpx 0;
      .title {
        font-size: 32rpx;
        font-weight: 600;
        color: var(--color1);
      }
      .text {
        margin-top: 28rpx;
        font-size: 27rpx;
        line-height: 38rpx;
        color: var(--color3);
        text-align: justify;
      }
    }
    .menu {
      display: flex;
      justify-content: space-evenly;
      width: 100vw;
      height: 72rpx;
      padding: 0 30rpx;
      background-color: #fff;
      @include border-top(#dfe3e6);
      &::before {
        left: 30rpx;
        width: calc(100vw - 60rpx);
      }
      .item {
        position: relative;
        font-size: 30rpx;
        font-weight: 500;
        line-height: 72rpx;
        color: var(--color4);
        letter-spacing: 0px;
        &.active {
          color: var(--color1);
          &::after {
            position: absolute;
            right: 0;
            bottom: -3rpx;
            left: 0;
            width: 100%;
            height: 6rpx;
            content: '';
            background-color: var(--color1);
            border-radius: 6rpx;
          }
        }
      }
    }
  }

  .content {
    padding: 0 30rpx;
  }
}
</style>
